<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         * {
             margin: 0;
             padding: 0;
         }
         .c {
             width: 200px;
             margin: 100px auto 0;
         }
         table {
            border-collapse: collapse;
             border-spacing: 0;
             width: 200px;
             border: 1px solid #ccc;
         }
         th,td {
             border: 1px solid #ccc;
         }

    </style>
</head>
<body>
    <div class="c">
    <table>
        <thead>
        <tr>
            <th> <input type="checkbox" name="" id="a"></th>
             <th>商品</th>
             <th>价格</th>
         
          
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="" id=""></td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id=""></td>
            <td>iPhone7</td>
            <td>6000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" id=""></td>
            <td>iPhone6</td>
            <td>5000</td>
        </tr>
    </tbody>
    </table>
</div>
<script>
     var a = document.querySelector('#a')
     var min = document.querySelector('tbody').querySelectorAll('input');
     console.log(min);
     a.onclick = function(){
         for(var i = 0;i<min.length;i++){
             min[i].checked = this.checked

         }
     }
     for(var i=0 ;i<min.length;i++){
         min[i].onclick = function(){
             var flag = true;
             for(var i=0;i<min.length;i++){
                 if(!min[i].checked){
                       flag = false;
                       break;
                 }
              
             }
                    a.checked = flag
         }
     }
     
</script>
</body>
</html>